<!doctype html>
<!--
@license
Copyright 2018 Google Inc. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<html>
<head>
  <title>card demo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script  src="../node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js"></script>
  <style>
    body {
      font-family: Arial, Helvetica, sans-serif;
      background-color: rgba(0, 0, 0, 0.05);
    }

    .presentCard {
      padding: 40px;
      display: flex;
      justify-content: center;
    }

    .content {
      padding: 8px;
      background-color: tomato;
    }

    .rounded {
      border-radius: 8px;
      overflow: hidden;
    }

  </style>
</head>
<body class="unresolved">
  <script type="module">
    import {style as cardStyle} from '../node_modules/@material/mwc-card/mwc-card-css.js';
    import {style as typographyStyle} from '../node_modules/@material/mwc-typography/mwc-typography-css.js';
    import {LitElement, html} from '../node_modules/lit-element/lit-element.js';
    import '../node_modules/@material/mwc-button/mwc-button.js';
    import '../node_modules/@material/mwc-icon/mwc-icon.js';
    import '../node_modules/@material/mwc-icon-toggle/mwc-icon-toggle.js';
    import '../node_modules/@material/mwc-ripple/mwc-ripple.js';

    class DemoCard extends LitElement {
      static get styles() {
        return [
          cardStyle,
          typographyStyle,
          css`
            :host {
              display: inline-block;
            }

            .mdc-card {
              max-width: 350px;
            }

            .my-media {
              background-image: url('https://material-components-web.appspot.com/images/16-9.jpg');
            }

            .content {
              padding: 1rem;
            }

            .subtext {
              color: rgba(0, 0, 0, 0.54);
            }
          `,
        ];
      }

      render() {
        return html`
          <div class="mdc-card">
            <div class="mdc-card__primary-action">
              <div class="mdc-card__media mdc-card__media--16-9 my-media"></div>
              <div class="content">
                <h2 class="mdc-typography--title">Our Changing Planet</h2>
                <h3 class="mdc-typography--subheading1 subtext">by Kurt Wagner</h3>
                <div class="mdc-typography--body1 subtext">Visit ten places on our planet that are undergoing the biggest changes today.</div>
              </div>
              <mdc-ripple></mdc-ripple>
            </div>
            <!-- ... content ... -->
            <div class="mdc-card__actions">
              <div class="mdc-card__action-buttons">
                <mwc-button dense class="mdc-card__action--button">Read</mwc-button>
                <mwc-button dense class="mdc-card__action--button">Save</mwc-button>
              </div>
              <div class="mdc-card__action-icons">
                <mwc-icon-toggle title="Share" icon="share"></mwc-icon-toggle>
                <mwc-icon-toggle title="More options" icon="more_vert"></mwc-icon-toggle>
              </div>
            </div>
          </div>
        `;
      }
    }

    customElements.define('demo-card', DemoCard);
  </script>
  <div class="presentCard">
    <demo-card></demo-card>
  </div>
  <script>
    addEventListener('load', () => document.body.classList.remove('unresolved'));
  </script>
</body>
</html>
